<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2020/5/17
  Time: 8:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<html>
<head>
    <title>采购申请</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
    <Collapse value="search">
        <Panel name="search">
        </Panel>
    </Collapse>
    <card>
        <i-button type="info" @click="toCai">采购申请</i-button>
    </card>
    <modal v-model="caiFlag" title="采购订单" :width="800" @on-ok="caiGou()">
        <i-form :label-width="80" style="padding: 30px" >
            <form-item label="供应商">
                <i-select v-model="org.providerId" style="width: 300px">
                    <i-Option v-for="item in providerList" :value="item.id" :key="item.id">{{item.proName}}</i-Option>
                </i-select>
            </form-item>
        </i-form>
        <i-button @click="add">增加</i-button>
        <i-button>提交</i-button>
        <i-table :columns="myColumns" :data="data" border  style="overflow: visible " stripe :height="200">

        </i-table>


    </modal>


    <i-table  :columns="columns" :data="pageResult.rows"   :height="400" border stripe>
        <template slot-scope="{row}" slot="proName">
            <span>{{row.provider.proName}}</span>
        </template>
        <template slot-scope="{row}" slot="state">
            <span>{{row.state==0?"未审核":"已审核"}}</span>
        </template>
    </i-table>
    <Page :total="pageResult.total"
          :page-size="pageSize"
          @on-change="pageNo=arguments[0];search();"
          show-sizer
          :page-size-opts="[5,10,15]"
          @on-page-size-change="pageSize=arguments[0];search();"
    />
</div>
<script>
    new Vue({
        el:"#root",
        data(){
            return{
                columns:[
                    {title:"编号",key: "id"},
                    {title:"生成日期",key: "createTime"},
                    {title:"审核日期",key: "checkTime"},
                    {title:"采购日期",key:"purchaseTime"},
                    {title:"下单员",key:"creator"},
                    {title:"审核员",key:"checker"},
                    {title:"采购员",key:"purchaser"},
                    {title:"库管员",key:"stockKeeper"},
                    {title:"供应商",slot:"proName"},
                    {title:"总金额",key:"totalMoney"},
                    {title:"订单状态",slot:"state"},
                    // {title:"操作",slot:"action"}

                ],
                myColumns:[
                    {title:"商品编号",key:"goodsId",
                        render(h,params){
                        if(params.row.$isEdit){
                            return h('Input',{
                                props:{
                                    type:"number",
                                    value:params.row.goodsId=_this.data[params.index].goodsId,
                                    readonly:"true"
                                },
                                on:{
                                    "on-blur":event=>{
                                        if(event.target.value==null){
                                            return _this.$Message.warning("编号不能为空")
                                        }
                                        params.row.goodsId = event.target.value;
                                        _this.data[params.index].goodsId=event.target.value;
                                        _this.$set(params.row,'$isEdit',false);
                                    },
                                }
                            });
                        }else{
                            return h('div',{
                                on:{
                                    click:()=>{
                                        _this.$set(params.row,'$isEdit',true);
                                    },
                                }
                            },params.row.goodsId);
                        }

                        }

                    },
                    {title:"商品名称",key:"goodsName",width:"120",
                            render:(h,params)=>{
                                  return h('i-select',{
                                      props:{
                                          filterable:"true",
                                      },
                                      on:{
                                          'on-change':(event)=>{
                                        axios.get('${ctx}/sys/goods/dui?id=${event}')
                                            .then(({data})=>{
                                                _this.goodsList2=data.result;
                                                _this.data[params.index].goodsName=_this.goodsList2.name
                                                params.row.goodsName=_this.data[params.index].goodsName
                                                _this.data[params.index].goodsId=_this.goodsList2.id
                                                _this.mydata2[params.index].price=_this.goodsList2.sellingPrice

                                            });
                                          },
                                      },
                                  },
                                      _this.goodsList1.map(function(type){//这个数组需要在data中定义，里面是一个个对象，每个对象里面应当包含value属性(因为要用到)
                                          return h('Option',{
                                              props:{
                                                  value:type.id,
                                                  label:type.name,
                                              },
                                              style:{
                                                  fontSize:'14px',
                                                  cursor:'pointer',
                                                  color:'blue',
                                              }
                                          },type);
                                      })
                                  )
                                  }
                            },
                        /*        render: (h, { row, index }) => {
                                    return h("Select", {
                                            props: {
                                                value: row.name
                                            },
                                            on: {
                                                'on-select': val => {
                                                    this.data[index].name = val;
                                                }
                                            }
                                        },
                                        this.shangList.map(item=>{
                                            return h('Option',{
                                                props:{
                                                    value:item.name,
                                                    label:item.name
                                                }
                                            })
                                        })
                                    );
                                }*/
                    /*    render(h,{row,index}){
                            if(index==_this.editObj.editIndex){
                                let arr2=[];
                                // console.log(_this.shangList)
                                for(let obj of _this.shangList){
                                    var vnode=h("i-option",{
                                        props:{value:obj.name}
                                    },obj.text);
                                    arr2.push(vnode);

                                }
                                let vNodes=[
                                    h("i-select",{
                                            props:{value:_this.editObj.goodname},
                                            on:{
                                                input:(val)=>{
                                                    _this.editObj.goodname=val;

                                                }
                                            }
                                        },arr2
                                    )
                                ];
                                return h("div",vNodes)

                            }else{
                                console.log(row)
                                return h("div",row.goodname);
                            }
                        }*/


                    {title:"价格",key:"price",
                        render:(h,params)=>{
                         if(params.row.$isEdit){
                             return h('Input',{
                                 props:{
                                     type:"number",
                                     value:params.row.price=_this.data[params.index].price,
                                     readonly:"true"
                                 },
                                 on:{
                                     "on-blur":event=>{
                                         params.row.price=event.target.value;
                                         _this.data[params.index].price=event.target.value;
                                         _this.$set(params.row, 'isEdit',false);
                                     },
                                 }
                             });
                         }else{
                             return h('div',{
                                 on:{
                                     click:()=>{
                                         _this.$set(parms.row, '$isEdit',true);
                                     },
                                 }
                             },params.row.price);
                         }
                        }
                    },
                    {title:"数量",key:"num",
                        render:(h,params)=> {
                            if (params.row.$isEdit) {
                                return h('Input', {
                                    props: {
                                        type: "number",
                                        value: params.row.num
                                    },
                                    on: {
                                        "on-blur": event => {
                                            if (event.target.value < 0 || event.target.value == null || event.target.value == 0) {
                                                return _this.$Message.warning("数量不能为空且必须大于零")
                                            }
                                            if (params.row.goodsName < 0 || params.row.goodsName == null || params.row.goodsName == 0) {
                                                return _this.$Message.warning("请选择商品")
                                            }
                                            params.row.num = event.target.value;
                                            _this.data[params.index].num = event.target.value;
                                            _this.$set(params.row, '$isEdit', false);
                                        },
                                    }
                                });
                            } else {
                                return h('div', {
                                    on: {
                                        click: () => {

                                            _this.$set(params.row, '$isEdit', true);
                                        },
                                    }
                                }, params.row.num);
                            }
                        },
                        },

                    {title:"金额",key:"money",
                         render:(h,params)=>{
                        if(params.row.$isEdit){
                            return h('Input',{
                                props:{
                                    type:"number",
                                    value:params.row.money=(params.row.num+params.row.price).toFixed(2),
                                    readonly:"true"
                                },
                                on:{
                                    "on-blur":event=>{
                                        params.row.money=event.target.value;
                                        _this.data[params.index].money=event.target.value;
                                        _this.$set(params.row, '$isEdit',false);
                                    }
                                }
                            })
                        }
                         }
                    },
                    {title:"操作",key:"action", width:80,
                        render:(h,params)=>{
                        return h('div',[
                            h('i-Button',{
                                props:{
                                    type:'error',
                                    size:'small'
                                },
                                on:{
                                    "click":(index,row)=>{
                                        _this.data.splice(index,1)
                                    }
                                }
                            },'删除'),
                            h('i-Button',{

                            })
                        ])
                        }


                    }
                ],

                data:[],
                goodsList2:[],
        goodsList1:[],
                pageResult:{
                    rows:[],
                    total:50
                },
                caiFlag:false,
                pageNo:1,
                pageSize:5,
                org:{
                    providerId:'',
                },
                providerList:[],
                shangList:[],
                editObj:{
                    editIndex:-1,
                    goodsId: "",
                    goodname: "",
                    price: "",
                    number: "",
                    money:""
                },
            }

        },
        created(){
            _this=this;
        },
        methods:{
            search(){
                axios.get(`${ctx}/caiGou/sq/search/${this.pageNo}/${this.pageSize}`)
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },
            searchProvider(){
                axios.get(`${ctx}/sys/provider/list`)
                    .then(({data})=>{
                        this.providerList=data.result;
                    });
            },
            searchGoods(){
                axios.get(`${ctx}/sys/goods/list`)
                    .then(({data})=>{

                        this.shangList=data.result;


                    })
            },

            toCai(){
                this.caiFlag=true;
            },
            remove(index){
                this.data.splice(index,1);
            },
            add(){

                if(this.org.providerId==null||this.org.providerId==0){
                    return this.$Message.error("请先选择供应商");
                }
                let row = {
                    num:"0",
                    money:"0",
                }
                this.data.push(row);
             /*   var addObj={};
                Object.assign(addObj,_this.editObj);//属性复制
                this.data.push(addObj);
                var index = _this.data.length-1;
                _this.editObj.editIndex=index;*/
            },

            caiGou(){
                // console.log("sddfsfs")
            }


        },
        mounted(){
            this.search();
            this.searchProvider();
            this.searchGoods();
        },
    })
</script>
</body>
</html>